<template>
  <view class="wrap" @click="isExpand = false" :style="'padding-top:'+statusHeight+'rpx'">
    <!-- <u-navbar title="剂安安" @leftClick="BcakFun">
      <view class="u-nav-slot" slot="right">
        <view @click.stop="isExpandFun" class="icon-dd" style="font-size: 42rpx;font-weight: 700;margin-top: -20rpx;">...</view>
      </view>
    </u-navbar> -->
    <!-- 标题按钮 -->
    <!-- <cover-view class="navBar" :style="'height:'+navBarHeight+'rpx'" style="padding-top: 40rpx;">
      <cover-view class="navBar_content">
        <cover-view class="navBar_left" @click.stop="BcakFun">
          <cover-image class="img" src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/back.png" @click.stop="BcakFun"></cover-image>
        </cover-view>
        <cover-view class="navBar_mid">剂安安</cover-view>
        <cover-view class="navBar_right icon-dd" @click.stop="isExpandFun">...</cover-view>
      </cover-view>
    </cover-view> -->
    <!-- 广告 -->
    <!-- <block v-if="retData.item_list && retData.item_list.length && retData.info.is_scan">
      <ad :adpid="adId[0]" @load="onload" @close="onclose" @error="onerror"></ad>
    </block> -->
    <!-- 头部 -->
    <view class="head_box">
      <view class="head_left">
        <!-- <view class="head_left_icon" @click="previewImageFun([retData.info.data_image])">
          <image :src="retData.info.data_image || retData.info.data_image_code" mode="aspectFill"></image>
        </view> -->
        <view class="head_left_info">
         <!-- <view class="head_left_info_title line2">
            {{retData.info.name}}
          </view> -->
          <!-- <view class="head_left_info_text line1">
            {{retData.info.corporate}}
          </view> -->

          <!-- <view class="head_left_info_count line1">
            规格：{{retData.info.data_specs}}
          </view> -->
        </view>
      </view>
      <view class="head_right" v-if=" retData.info.grade || !typeMain && retData.info.grade">
		
        <!-- 等级 -->
        <view v-if="retData.info.grade=='-'&&retData.info.is_scan=='1'&&retData.info.is_locked=='0'&&retData.info.is_zero=='0'"  class="head_right_rank" >
          <view class="noresimg" style="">
				<image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/scan-nores.png"></image>
          </view>
        </view>
		<view v-else class="head_right_rank" @click="alterMainTwo = true;">
		  <view class="head_right_rank_spot">
		    <!-- <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/details-5.png"></image> -->
		    含
		  </view>
		  <view class="head_right_rank_text" :class="retData.info.grade=='B'?'b_color':retData.info.grade=='C'?'c_color':retData.info.grade=='D'?'d_color':retData.info.grade=='B-'?'b1_color':''" :style="retData.info.grade=='B-'?'font-size:56rpx;margin-top:10rpx':'font-size:70rpx'">
		    {{retData.info.grade?retData.info.grade+'级':''}}
		  </view>
		</view>
        <!-- 等级文字描述 -->
        <!-- <view class="head_right_text" :class="retData.info.grade=='B'?'b_color':retData.info.grade=='C'?'c_color':retData.info.grade=='D'?'d_color':retData.info.grade=='B-'?'b1_color':''">
          {{retData.info.grade_title}}
        </view> -->
      </view>
      <view class="head_right" v-else>
        <view class="head_right_rank">
        </view>
      </view>
      <view class="list-ddd">
        <view class="li">
          <view class="name">A级</view>
          <view :class="retData.info.grade=='A'?'value':''">天然有机</view>
        </view>
        <view class="li">
          <view class="name b_bg">B级</view>
          <view :class="retData.info.grade=='B'?'value b_bg':''">绿色健康</view>
        </view>
        <view class="li">
          <view class="name b1_bg">B-级</view>
          <view :class="retData.info.grade=='B-'?'value b1_bg':''">孕童少食</view>
        </view>
        <view class="li">
          <view class="name c_bg">C级</view>
          <view :class="retData.info.grade=='C'?'value c_bg':''">含危险物</view>
        </view>
        <view class="li">
          <view class="name d_bg">D级</view>
          <view :class="retData.info.grade=='D'?'value d_bg':''">致癌风险</view>
        </view>

      </view>
    </view>

    <!-- 添加剂 -->
    <block v-if="typeMain">
      <view class="additive-box">
        <view class="title-d">
          <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/ret-1.png" mode="widthFix"></image>
          <view class="i"></view>
          <view class="name">添加剂</view>
        </view>
        <view class="list-d">
          <block v-if="scan_end && retData.info.is_scan ">
            <view class="list" v-for="(item,index) in retData.item_list" :key="index">
              <view class="tit">
                <view class="i" :class="item.grade=='B'?'b_bg':item.grade=='C'?'c_bg':item.grade=='D'?'d_bg':item.grade=='B-'?'b1_bg':''">
                </view>
                <text style="width: 80rpx;display: inline-block;vertical-align: top;">
                  {{item.grade}}级
                </text>
                <view class="span" v-if="item.grade =='A'">{{item.name}}</view>
                <view class="span b_border b_color" v-if="item.grade =='B'">{{item.name}}</view>
                <view class="span b1_border b1_color" v-if="item.grade =='B-'">{{item.name}}</view>
                <view class="span c_border c_color" v-if="item.grade =='C'">{{item.name}}</view>
                <view class="span d_border d_color" v-if="item.grade =='D'">{{item.name}}</view>
              </view>
              <view class="li-d">
                <view class="li" @click="itemListFun(index)">
                  <view class="i" :class="item.grade=='B'?'b_bg':item.grade=='C'?'c_bg':item.grade=='D'?'d_bg':item.grade=='B-'?'b1_bg':''">
                  </view>
                  <view class="name">
                    {{item.item.length}}个
                  </view>
                  <view class="img1" :style="item.main?'transform: rotate(270deg);':''">
                    <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/my7.png"></image>
                  </view>
                </view>
                <block v-if="item.main">
                  <view class="li" v-for="(items,indexs) in item.item" :key="indexs" @click.stop="toInfoFun(items)">
                    <view class="i" :class="item.grade=='B'?'b_bg':item.grade=='C'?'c_bg':item.grade=='D'?'d_bg':item.grade=='B-'?'b1_bg':''">
                    </view>
                    <view class="name line1" style="max-width: 240rpx;color: #669ddb;border-bottom: solid 1rpx #669ddb; display: inline-block;vertical-align: top;width:auto;line-height: 40rpx;margin: 6rpx 0;">
                      {{items.name}}
                    </view>

                    <!-- <view class="type" v-if="items.label_list && items.label_list.length">
											<text v-for="(itemss,indexss) in items.label_list" :key="indexss">{{itemss}}</text>
										</view> -->

                    <!-- <view class="img">
											<image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/13.png"></image>
										</view> -->

                    <view class="right-d" v-if="items.lable_name_arr && items.lable_name_arr.length">
                      <view class="line1" v-for="(itemss,indexss) in items.lable_name_arr" :key="indexss" :class="item.grade=='B'?'b_bg':item.grade=='C'?'c_bg':item.grade=='D'?'d_bg':item.grade=='B-'?'b1_bg':''">
                        {{itemss || '暂无标签'}}
                      </view>
                    </view>
                    <view class="right-d" v-else>
                      <view class="line1" :class="item.grade=='B'?'b_bg':item.grade=='C'?'c_bg':item.grade=='D'?'d_bg':item.grade=='B-'?'b1_bg':''">
                        暂无标签
                      </view>
                    </view>
                  </view>
                </block>

              </view>
            </view>
            <view class="content-ramk" v-if="!retData.info.is_locked">
              <view style="color: #f36464;">以上为AI识别，暂未经过人工核对</view>
              <view style="color: #f36464;">仅供参考</view>
            </view>
          </block>

          <block v-else>
            <view class="content" v-if="scan_end && !retData.info.is_scan">
              <view class="content_text">
                <view style="line-height: 40rpx;">
                  一张图拍摄不全时
                </view>
                <view style="line-height: 40rpx;">
                  可在“从相册选择”中上传多张
                </view>

              </view>
              <view class="content_btn" @click="chooseImage(1,1)">
                配料表拍照
              </view>
              <view class="copy-right" @click="chooseImage(1,2)">
                <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/img-dd.png">
                </image>
              </view>
              <view class="copy-left" @click="alterMainOne = true;copyType = 1">
                *样图:
                <image src="https://app.jichacha.vip/upload/da/cd4cee8efd7aebba3de0ebbfd8224d.png">
                </image>
              </view>
            </view>

            <view class="content-dd" v-if="retData.info.is_scan">
              <block v-for="(item,index) in data_image_all" :key="index">
                <view class="img" @click="previewImageFun(data_image_all,index)">
                  <image :src="item" mode="widthFix"></image>
                </view>
              </block>
              <view class="title-dd">添加剂解析中.....</view>
              <!-- <view :style="retData.info.is_scan_nutrition?'margin-bottom:-20rpx':''" v-if="retData.info.is_scan_nutrition">AI未识别，将进行人工校对</view> -->
              <!-- <view style="color:red;font-weight:700;padding-left: 30rpx;" v-if="!retData.info.is_scan_nutrition">请继续拍摄“营养成分表”</view> -->
            </view>

          </block>
        </view>
      </view>
    </block>

    <!-- 添加剂 -->
		<!--0添加剂-->
	<block v-else-if=" scan_end && retData.info.grade=='-'&&retData.info.is_scan=='1'&&retData.info.is_locked=='0'&&retData.info.is_zero=='0' ">
		<view class="quantity-box" >
		  <view class="title-d">
		    <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/ret-2.png" mode="widthFix"></image>
		    <view class="i"></view>
		    <view class="name">
		      添加剂
		    </view>
		  </view>
			<view style="color: #f36464;margin: 10px 20px 0 20px;">以下为AI识别，暂未经过人工核对仅供参考</view>
		  <view class="content-dd" style="height: 180px;" >
		    
		    <text class="multi-line-text">
		    		{{retData.info.item_text}}
		    </text>
		  </view>
		    
		</view>
		
		
	</block>
    <block v-else>
      <view class="additive-box">
        <view class="title-d">
          <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/ret-1.png" mode="widthFix"></image>
          <view class="i"></view>
          <view class="name">添加剂</view>
        </view>
        <view class="additive-none">
          <image style="position: relative;z-index: 1;" src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/img-9.png"></image>
          <!-- style="margin-top: -80rpx;position: relative;z-index: 2;" -->
          <view class="content-dd" v-if="!retData.info.is_locked">
            <view style=" color: #f36464;">以上为AI识别，暂未经过人工核对</view>
            <view style="color: #f36464;">仅供参考</view>
          </view>
		  
        </view>
      </view>
    </block>
	
	

    <!-- <view class="status-ddd">{{retData.text_content.text_dbsm || '剂安安评定的等级，只针对食品添加剂而非产品本身'}}</view> -->

    <!-- <view class="status-img" v-if="!isExpand" :style="{'top': 'calc(15rpx + '+(navBarHeight*1.5 + 'rpx')+')'}" @click="$u.route('/pages/scans/upload?type=2&code='+retData.info.code)">
			<image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/img-8.png"></image>
		</view> -->
    <cover-view class="expand_box" :style="{'top': 'calc(15rpx + '+(navBarHeight + 'rpx')+')'}" v-if="isExpand">
      <cover-view class="expand_info">

        <!-- <cover-view class="expand_text" style="margin-top: 90rpx;">
					评分方法
				</cover-view>
				<cover-view class="expand_line"></cover-view> -->

        <cover-view style="width:100%;" class="expand_text" @click.stop="setFavoriteFun">
          <cover-image @click.stop="setFavoriteFun" style="width: 32rpx;height: 32rpx;display: inline-block;vertical-align: top;margin: 0 10rpx 0 50rpx;" src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/expand-1.png" v-if="!retData.info.is_favorite"></cover-image>
          <cover-image @click.stop="setFavoriteFun" style="width: 32rpx;height: 32rpx;display: inline-block;vertical-align: top;margin: 0 10rpx 0 50rpx;" src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/expand-2.png" v-else></cover-image>
          <cover-view @click.stop="setFavoriteFun" style="display: inline-block;font-size: 28rpx;color: #434242;">{{retData.info.is_favorite?'已收藏':'收藏'}}</cover-view>
        </cover-view>
        <cover-view class="expand_line"></cover-view>
        <cover-view style="width:100%;" class="expand_text" @click.stop="toUrl('/pages/scans/upload?type=2&code='+retData.info.code)">
          <cover-image @click.stop="toUrl('/pages/scans/upload?type=2&code='+retData.info.code)" style="width: 32rpx;height: 32rpx;display: inline-block;vertical-align: top;margin: 0 10rpx 0 50rpx;" src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/expand-3.png"></cover-image>
          <cover-view @click.stop="toUrl('/pages/scans/upload?type=2&code='+retData.info.code)" style="display: inline-block;font-size: 28rpx;color: #434242;">纠错</cover-view>
        </cover-view>
        <cover-view class="expand_line"></cover-view>
        <!-- show = true; isExpand=false-->
        <cover-view style="width:100%;" class="expand_text" @click.stop="appToShareWeiXin">
          <cover-image @click.stop="appToShareWeiXin" style="width: 32rpx;height: 32rpx;display: inline-block;vertical-align: top;margin: 0 10rpx 0 50rpx;" src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/expand-4.png"></cover-image>
          <cover-view @click.stop="appToShareWeiXin" style="display: inline-block;font-size: 28rpx;color: #434242;">分享</cover-view>
        </cover-view>
      </cover-view>
    </cover-view>
    

    <!-- <view class="alter-top-box" :class="!alterMain?'none':''" :style="'padding-top:'+(navBarHeight+30)+'rpx'">
      <view class="img">
        <image src="https://jichacha-bt-bak.oss-cn-shenzhen.aliyuncs.com/wxxcx/static/images/ret-6.png"></image>
      </view>
      <view class="text-d">
        <view class="name">恭喜您获得<text>{{money}}</text>元红包</view>
      </view>
    </view> -->

  </view>
</template>

<script>
import {
  // scanningDetail,
  getGoodsDetail,
  setFavorite,
  setHistory,
  setRestockItem,
  getGoodsShare,
  nutritionItem,
  scanItemImage
} from '@/api/api.js';
import { HTTP_REQUEST_URL } from '@/config/app.js'
export default {
  data() {
    return {
      alterMainOne: false,
      copyType: 1,
      retImg: HTTP_REQUEST_URL+'/upload/e8/cb25d38c784a9658a37fa39595f734.jpg',
      alterMain: false,
      money: '5.00',
      cateListMain: false,
	  scan_end:false,
	  gcode:0,
      retData: {
        cate_list: [],
        info: {
			"id": '',
			"code": "",
			"calorie_num": "0.0",
			"score": 100,
			"standard_id": 0,
			"cate_id": 1,
			"name": "",
			"grade": "-",
			"data_specs": "",
			"data_unit": "",
			"data_image": "",
			"is_scan": 1,
			"is_locked":0,
			"item_no_res": 0,
			"is_zero": 0,
			"is_favorite": 0
		},
        item_list: [],
        stage_list: [],
        execute_sandard: {}
      },
      alterMainTwo: false,
      show: false,
      kcals: 3,
      kcalss: 1,
      isType: true,
      isExpand: false,
      navBarHeight: '',
	  statusHeight: 200,
      isShare: false, //分享后显示
      urlArr: [],
      typeMain: true,
      imgType: 1,
      data_image_all: [],
      data_nutrition_all: [],
      setTimeoutFun: null,
      chooseImageMain: false,
      iosMain: false,
      adId: []
    };
  },
  onLoad(options) {
	  console.log( 'onUnload-options',options);
	  if (options.gcode) {
	  	this.gcode = options.gcode;
	  }
  },
  onUnload() {
    this.onUnloadFun();
  },
  onShow() {
	console.log('onShow');
	let that = this;
	let itemImg = uni.getStorageSync('itemImg');
	if(itemImg == '' || itemImg == undefined){
		uni.navigateTo({
			url: '/pages/tabbar/index?home=true'
		})
	}
	uni.setStorageSync('itemImg','');
	that.scanItemImageFun(itemImg);
  },
  methods: {
    // AD相关方法开始
    onload1(e) {
      console.log("onload");
    },
    onclose1(e) {
      console.log("onclose: " + e.detail);
    },
    onerror1(e) {
      console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
    },


    onload(e) {
      console.log("onload");
    },
    onclose(e) {
      console.log("onclose: " + e.detail);
    },
    onerror(e) {
      console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
    },
    // AD相关方法结束

    audioPlay() {
      // const innerAudioContext = uni.createInnerAudioContext();
      // innerAudioContext.src = 'https://app.jichacha.vip/upload/send.mp3';
      // innerAudioContext.play();
      // innerAudioContext.onEnded(() => {
      //   innerAudioContext.destroy(); // 音乐播放结束后销毁实例
      // });
    },
    BcakFun() {
      uni.navigateBack()
    },
    setNutritionFun() {
      if (this.retData.nutrition.length) {
        this.retData.nutrition = this.retData.nutrition.map((item) => {
          let width = 0;
          let num = item.num;
          if (item.judge == 2) {
            num = item.nrv;
          }
          let level = 0;
          item.stage.forEach((items, indexs) => {
            if (parseFloat(items.data[0]) < num && items.data[1] == '∞') {
              level = indexs;
            } else {
              if (parseFloat(items.data[0]) < num && num < parseFloat(items.data[1])) {
                level = indexs;
              }
            }
          })
          item.stage.forEach((items, indexs) => {
            if (indexs == level) {
              if (items.data[1] == '∞') {
                width = 50
              } else {
                let max = parseFloat(items.data[1]) - parseFloat(items.data[0]);
                let min = parseFloat(num) - parseFloat(items.data[0]);
                width = parseInt((min / max) * 100)
              }
            }
          })
          item.level = level;
          item.width = width;
          item.num = num;
          return item;
        })
        this.$forceUpdate()
      }
    },
    onUnloadFun() {
      if (this.setTimeoutFun != null) {
        clearInterval(this.setTimeoutFun)
        this.setTimeoutFun = null
      }
    },
	scanItemImageFun(img) {
		let that = this
		console.log(' --- that.gcode', that.gcode);
		console.log(' ---ScanResultItem scanItemImageFun',img);
		
	  scanItemImage({// scanItemImage 
	    gcode: that.gcode,
	    image_url: img
	  }).then((resOne) => {
		  console.log('end scanItemImage',resOne)
		  uni.$u.toast('解析成功，感谢您的支持')
		  
		  this.retData.info.grade = resOne.data.info.grade;
		  this.retData.info.score = resOne.data.info.score;
		  this.retData.item_list = resOne.data.item_list;
		  this.typeMain = true;
		  if(resOne.data.item_list.length == 0){
			this.typeMain = false;
			this.retData.info.grade = '-';
			this.retData.info.item_text = resOne.data.info.item_text;
		  }
		  this.alterMain = false;
		  this.scan_end = true;
		  this.$forceUpdate();
		  
		  
		  setTimeout(() => {
			console.log(' ---RestFun');
		    //this.RestFun()
		  }, 2000)
	  }).catch((e) => {
	    uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
	  })
	},
    nutritionFun(index) {
      this.retData.nutrition[index].main = !this.retData.nutrition[index].main
      this.$forceUpdate()
    },
    itemListFun(index) {
      this.retData.item_list[index].main = !this.retData.item_list[index].main
      this.$forceUpdate()
    },
    toUrl(url) {
      this.isExpand = false;
      this.onUnloadFun();
      uni.navigateTo({
        url: url
      })
    },
    previewImageFun(url, index) {
      // uni.previewImage({
      //   urls: url,
      //   current: index || 1
      // })
    },
    setGradeFun(value) {
      if (value > 50) {
        if (value > 70) {
          if (value > 85) {
            return 'A'
          } else {
            return 'B'
          }
        } else {
          return 'C'
        }
      } else {
        return 'D'
      }
    },
    chooseImage(value, type) {
      const that = this;
      if (uni.getStorageSync('uploadImage')) {
        that.chooseImageFun(value, type)
      } else {
        uni.showModal({
          title: '温馨提示',
          content: 'APP将调用您的手机的相册查看功能和拍照功能，用于上传图片,请确认授权',
          success(ress) {
            if (ress.confirm) {
              uni.setStorageSync('uploadImage', true)
              that.chooseImageFun(value, type)
            }
          }
        })
      }
    },
    chooseImageFun(value, type) {
      const that = this
      if (that.chooseImageMain) {
        return
      }
      that.chooseImageMain = true;
      this.imgType = value;
      setTimeout(() => {
        that.chooseImageMain = false;
      }, 2000)
      uni.chooseImage({
        count: 3,
        sizeType: ['compressed', 'original'],
        sourceType: type == 1 ? ['camera'] : ['album'],
        success: (res) => {
          let maxNums = 10485760;
          let main = false;
          res.tempFiles.forEach((item) => {
            if (item.size > maxNums) {
              main = true;
            }
          })
          if (main) {
            uni.showToast({
              title: '图片过大，不建议勾选原图',
              icon: 'none',
              duration: 3000
            })
            that.chooseImageMain = false;
            return
          }
          that.urlArr = []
          that.uploadFileAdd(res, 0, res.tempFilePaths.length, value)
        },
        complete() {
          that.chooseImageMain = false;
        }
      });
    },
    async uploadFileAdd(res, num, max, type) {
      const that = this
      if (num == max) {
        that.$nextTick(() => {
          that.chooseImageMain = false;
          that.setRestockItemFun(that.urlArr.join(), type)
        })
      } else {
        const result = await that.uploadFileFun(res.tempFilePaths[num])
        that.chooseImageMain = false;
        that.urlArr.push(result.data.url)
        this.uploadFileAdd(res, num + 1, max, type)
      }

    },
    async uploadFileFun(src) {
      let token = uni.getStorageSync('LOGIN_STATUS_TOKEN')

      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: HTTP_REQUEST_URL + '/api/newUpload',
          filePath: src,
          name: "file",
          header: {
            'Authorization': 'Bearer ' + token
          },
          success(res1) {
            resolve(JSON.parse(res1.data))
          },
          fail(res) {
            uni.showToast({
              title: res.errMsg,
              icon: 'none'
            })
            reject(res)
          }
        })
      })
    },
    RestFun() {
      this.alterMain = false;
      //uni.setStorageSync('submitImgSrc', this.retData.info.code);
      //this.getGoodsShareFun(this.retData.info.code)
	  
	  console.log('RestFun getGoodsShareFun','6959606558689');
	  //6959606558689
	  // uni.setStorageSync('submitImgSrc', '6959606558689');
	  // this.getGoodsShareFun('6959606558689');
	  
      // uni.navigateTo({
      // 	url: '/pages/scans/loading?SubmtType=2'
      // })
    },
    RestFunOne() {
      this.alterMain = false;
      uni.setStorageSync('submitImgSrc', this.retData.info.code);
      this.getGoodsShareFun(this.retData.info.code)
      uni.redirectTo({
        url: '/pages/users/wallet'
      })
    },
    getGoodsShareFun(gcode) {
      const that = this
      uni.showLoading({
        title: '获取中'
      })
      getGoodsShare({
        gcode: gcode || this.gcode,
        souce: true
      }).then((res) => {
		  
		console.log('getGoodsShare',res);
		  
		  
        uni.hideLoading();
        const {
          data
        } = res
        // let calorie_num = parseFloat(data.info.calorie_num)
        // let sugar_num = parseFloat(data.info.sugar_num)
        // data.stage_list.calorie.forEach((item, index) => {
        //   if (calorie_num > item) {
        //     if (index == data.stage_list.calorie.length - 1 || calorie_num <= data
        //       .stage_list.calorie[index + 1]) {
        //       console.log(item)
        //       that.kcals = index + 1
        //     }
        //   }
        // })
        // data.stage_list.sugar.forEach((item, index) => {
        //   if (sugar_num > item) {
        //     if (index == data.stage_list.sugar.length - 1 || sugar_num <= data.stage_list
        //       .sugar[index + 1]) {
        //       that.kcalss = index + 1
        //     }
        //   }
        // })
		// console.log('[1][2][3]', that.retData);
		//that.retData = data
		// console.log('[][][]', data);
		
      }).catch((e) => {
        uni.hideLoading();
        uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
      })
    },
    setRestockItemFun(img, type) {
      const that = this;
      uni.showLoading({
        title: '上传中'
      })
      if (type == 1) {
        setRestockItem({
          gcode: this.retData.info.code,
          image_url: img
        }).then((resOne) => {
          uni.hideLoading()
          if (resOne.data.send_money) {
            this.alterMain = true
            this.money = resOne.data.money
            this.audioPlay();
            setTimeout(() => {
              that.RestFun();
            }, 4000)
          } else {
            uni.$u.toast('上传成功')
            setTimeout(() => {
              this.RestFun()
            }, 2000)
          }

        }).catch((e) => {
          uni.hideLoading()
          uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
        })
      }
      if (type == 2) {
        nutritionItem({
          gcode: this.retData.info.code,
          image_url: img
        }).then((resOne) => {
          uni.hideLoading()
          if (resOne.data.send_money) {
            this.alterMain = true
            this.money = resOne.data.money
            this.audioPlay();
            setTimeout(() => {
              that.RestFun();
            }, 4000)
          } else {
            uni.$u.toast('上传成功')
            setTimeout(() => {
              this.RestFun()
            }, 2000)
          }

        }).catch((e) => {
          uni.hideLoading()
          uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
        })
      }
    },
    appToShareWeiXin() {
      let _this = this
      let url = 'https://app.jichacha.vip/upload/images/downImg/ios.png';
      if (this.iosMain) {
        url = 'https://app.jichacha.vip/upload/images/downImg/android.png';
      }
      const that = this
      uni.showLoading({
        title: '正在打开微信',
      })
      uni.share({
        provider: 'weixin', //分享服务提供商（即weixin|qq|sinaweibo）
        scene: "WXSceneSession", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏)
        type: 2,
        title: "好友邀请你使用剂安安APP,请访问：https://app.jichacha.vip/h5/#/pages/scans/ScanResultOne?gcode=" +
          that.retData.info.code,
        summary: "好友邀请你使用剂安安APP,请访问：https://app.jichacha.vip/h5/#/pages/scans/ScanResultOne?gcode=" +
          that.retData.info.code,
        imageUrl: url, //分享图片路径(必须是线上可访问图片：http://xxx、https://xxx等)
        success(res) {
          uni.showToast({
            title: '分享成功',
            icon: 'none'
          })

        },
        fail(err) {
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          })
        },
      });
      setTimeout(() => {
        uni.hideLoading()
      }, 2000)
    },
    appToShareQQ() {
      let url = 'https://app.jichacha.vip/upload/images/downImg/ios.png';
      let href = 'http://fenfa.tthweixin.com/3u7rj5';
      if (this.iosMain) {
        url = 'https://app.jichacha.vip/upload/images/downImg/android.png';
        href = 'http://fenfa.tthweixin.com/1xst';
      }
      const that = this
      uni.downloadFile({
        url: url,
        success(res1) {
          if (res1.statusCode === 200) {
            console.log(res1)
            uni.share({
              provider: 'qq', //分享服务提供商（即weixin|qq|sinaweibo）
              scene: "QQSceneSession", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏)
              type: 2,
              title: "剂安安APP分享",
              href: href,
              summary: "好友邀请你使用剂安安APP,请访问：" +
                href,
              imageUrl: url, //分享图片路径(必须是线上可访问图片：http://xxx、https://xxx等)
              success(res) {
                uni.showToast({
                  title: '分享成功',
                  icon: 'none'
                })
              },
              fail(err) {
                console.log(err, 'err')
                uni.showToast({
                  title: '分享失败',
                  icon: 'none'
                })
              }
            });
          }
        }
      })

    },
    setHistoryFun() {
      setHistory({
        gcode: this.retData.info.code
      }).then((resOne) => {

      }).catch((e) => {
        uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
      })
    },
    setFavoriteFun() {
      if (this.retData.info.is_favorite) {
        this.$u.route('/pages/scans/Collection')
        this.isExpand = false
      } else {
        uni.showLoading({
          title: '提交中'
        })
        setFavorite({
          gcode: this.retData.info.code,
          status: 0
        }).then((res) => {
          uni.hideLoading();
          uni.$u.toast('收藏成功');
          this.retData.info.is_favorite = true
          uni.setStorageSync('RetData', this.retData)
          this.isExpand = false
        }).catch((e) => {
          uni.hideLoading();
          uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
        })
      }

    },
    toResultFun(item) {
      const that = this
      console.log(item)
      if (item.code == this.retData.info.code) {
        return uni.$u.toast('点击商品与当前相同');
      }
      uni.showLoading({
        title: '获取中'
      })
      getGoodsDetail({
        gcode: item.code
      }).then((res) => {
        uni.hideLoading();
        const {
          data
        } = res
        let calorie_num = parseFloat(data.info.calorie_num)
        let sugar_num = parseFloat(data.info.sugar_num)
        data.stage_list.calorie.forEach((item, index) => {
          if (calorie_num > item) {
            if (index == data.stage_list.calorie.length - 1 || calorie_num <= data
              .stage_list.calorie[index + 1]) {
              console.log(item)
              data.info.calorie_index = index + 1
            }
          }
        })
        data.stage_list.sugar.forEach((item, index) => {
          if (sugar_num > item) {
            if (index == data.stage_list.sugar.length - 1 || sugar_num <= data.stage_list
              .sugar[index + 1]) {
              data.info.sugar_index = index + 1
            }
          }
        })
        uni.setStorageSync('RetData', data)
        that.retData = data
        that.kcals = that.retData.info.calorie_index || 1
        that.kcalss = that.retData.info.sugar_index || 1
        that.typeMain = that.retData.info.is_scan && that.retData.item_no_res != 0 && that.retData.item_list.length == 0 ? false : true
        that.setHistoryFun()
        if (that.retData.info.data_image_all) {
          if (that.retData.info.data_image_all.split('|').length != 1) {
            that.data_image_all = that.retData.info.data_image_all.split('|')
          } else {
            that.data_image_all = that.retData.info.data_image_all.split(',')
          }
        }
        if (that.retData.info.data_nutrition_all) {
          if (that.retData.info.data_nutrition_all.split('|').length != 1) {
            that.data_nutrition_all = that.retData.info.data_nutrition_all.split('|')
          } else {
            that.data_nutrition_all = that.retData.info.data_nutrition_all.split(',')
          }
        }
        that.setNutritionFun();
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 500
        })
      }).catch((e) => {
        uni.hideLoading();
        uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
      })
    },
    toInfoFun(item) {
      uni.navigateTo({
        url: '/pages/scans/details?id=' + item.id
      })
    },
    // scanningDetailFun() {
    //   const that = this
    //   uni.showLoading({
    //     title: '获取中'
    //   })
    //   scanningDetail({
    //     image_url: this.retImg
    //   }).then((res) => {
    //     uni.hideLoading();
    //     const {
    //       data
    //     } = res
    //     let calorie_num = parseFloat(data.info.calorie_num)
    //     let sugar_num = parseFloat(data.info.sugar_num)
    //     data.stage_list.calorie.forEach((item, index) => {
    //       if (calorie_num > item) {
    //         if (index == data.stage_list.calorie.length - 1 || calorie_num <= data
    //           .stage_list.calorie[index + 1]) {
    //           console.log(item)
    //           that.kcals = index + 1
    //         }
    //       }
    //     })
    //     data.stage_list.sugar.forEach((item, index) => {
    //       if (sugar_num > item) {
    //         if (index == data.stage_list.sugar.length - 1 || sugar_num <= data.stage_list
    //           .sugar[index + 1]) {
    //           that.kcalss = index + 1
    //         }
    //       }
    //     })
    //     this.$set(this, "retData", data)
    //     that.typeMain = that.retData.info.is_scan && that.retData.item_no_res != 0 && that.retData.item_list.length == 0 ? false : true
    //     if (that.retData.info.data_image_all) {
    //       if (that.retData.info.data_image_all.split('|').length != 1) {
    //         that.data_image_all = that.retData.info.data_image_all.split('|')
    //       } else {
    //         that.data_image_all = that.retData.info.data_image_all.split(',')
    //       }
    //     }
    //     if (that.retData.info.data_nutrition_all) {
    //       if (that.retData.info.data_nutrition_all.split('|').length != 1) {
    //         that.data_nutrition_all = that.retData.info.data_nutrition_all.split('|')
    //       } else {
    //         that.data_nutrition_all = that.retData.info.data_nutrition_all.split(',')
    //       }
    //     }
    //     that.setNutritionFun();
    //   }).catch((e) => {
    //     uni.hideLoading();
    //     uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
    //   })
    // },
    isExpandFun() {
      this.isExpand = !this.isExpand
    },
    close() {
      this.show = false;
    },
    open() {
      // console.log('open');
    },
  }
}
</script>
<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.line1 {
  white-space: nowrap;
  overflow: hidden; //文本超出隐藏
  text-overflow: ellipsis; //文本超出省略号替代
}
.line2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.d_color {
  color: #ee3a3a !important;
}
.noresimg{
	image{
		width:86px;
		height:66px;
	}
}

.d_bg {
  background: #ee3a3a !important;
}

.d_border {
  border: 1rpx solid #ee3a3a !important;
}

.c_color {
  color: #fec817 !important;
}

.c_bg {
  background: #fec817 !important;
}

.c_border {
  border: 1rpx solid #fec817 !important;
}

.b1_color {
  color: #6aa300 !important;
}

.b1_bg {
  background: #6aa300 !important;
}

.b1_border {
  border: 1rpx solid #6aa300 !important;
}

.b_color {
  color: #00cc70 !important;
}

.b_bg {
  background: #00cc70 !important;
}

.b_border {
  border: 1rpx solid #00cc70 !important;
}

.a_color {
  color: #30c285 !important;
}

.a_bg {
  background: #30c285 !important;
}

.a_border {
  border: 1rpx solid #30c285 !important;
}

.wrap {
  padding: 30rpx 0 0 0;
  background-color: #84a1db;
  min-height: 100vh;
  overflow: hidden;
  box-sizing: border-box;

  .head_box {
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    padding: 20rpx 15rpx;
    width: 710rpx;
    box-sizing: border-box;
    background-color: white;
    border-radius: 20rpx;
    margin: 0 auto;

    .head_left {
      display: inline-block;
      align-items: center;
      width: calc(100% - 240rpx);
      vertical-align: top;
      .head_left_icon {
        width: 180rpx;
        height: 180rpx;
        display: inline-block;
        vertical-align: top;
        image {
          width: 100%;
          height: 100%;
        }
      }

      .head_left_info {
        margin-left: 16rpx;
        width: calc(100% - 200rpx);
        display: inline-block;
        vertical-align: top;
        .head_left_info_title {
          font-size: 30rpx;
          font-weight: bold;
          color: #434242;
        }

        .head_left_info_text {
          margin-top: 20rpx;
          font-size: 24rpx;
          color: #afafaf;
        }

        .head_left_info_count {
          margin-top: 22rpx;
          font-size: 25rpx;
          color: #afafaf;
        }
      }
    }

    .head_right {
      display: inline-block;
      align-items: center;
      flex-direction: column;
      width: 240rpx;
      text-align: left;

      .head_right_text {
        font-size: 28rpx;
        font-weight: 700;
        color: #30c285;
        text-align: center;
        padding: 5rpx;
        border: none !important;
        border-radius: 8rpx;
        margin: 10rpx 0 0 40rpx;
      }

      .head_right_rank {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .head_right_rank_spot {
          width: 40rpx;
          height: 40rpx;
          background: white;
          border-radius: 50%;
          line-height: 40rpx;
          color: #afafaf;
          font-size: 26rpx;
          font-weight: 400;
          text-align: center;
          position: relative;
          margin-top: 24rpx;

          image {
            width: 24rpx;
            height: 29rpx;
            position: absolute;
            left: calc(50% - 12rpx);
            top: calc(50% - 14rpx);
          }
        }

        .head_right_rank_text {
          margin-left: 10rpx;
          font-size: 60rpx;
          font-weight: 700;
          color: #30c285;
        }
      }
    }
    .list-ddd {
      font-size: 22rpx;
      line-height: 26rpx;
      text-align: center;
      background-color: #f3f6fb;
      border-radius: 8rpx;
      padding: 16rpx 10rpx;
      width: 100%;
      margin: 20rpx 0 0 0;
      .li {
        display: inline-block;
        vertical-align: top;

        border-radius: 8rpx;
        min-height: 40rpx;
        font-weight: 400;
        color: #8f8f8f;
        overflow: hidden;
        text-align: center;
        width: 18%;
        margin: 0 1%;
        view {
          width: 100%;
          padding: 6rpx 10rpx;
        }
        .name {
          background: #00cc70;
          color: white;
        }
        .value {
          background: #00cc70;
          color: white;
        }
      }
    }
  }

  .additive-box {
    width: 710rpx;
    box-sizing: border-box;
    background-color: white;
    border-radius: 20rpx;
    margin: 20rpx auto;
    padding-bottom: 6rpx;

    .title-d {
      width: 100%;
      height: 80rpx;
      position: relative;
      padding: 0 40rpx;
      line-height: 80rpx;
      color: white;
      font-size: 34rpx;
      font-weight: 700;
      overflow: hidden;

      .i {
        display: inline-block;
        vertical-align: top;
        width: 6rpx;
        height: 32rpx;
        background-color: #00b9ff;
        margin: 26rpx 20rpx 0 0;
        position: relative;
        z-index: 1;
      }

      image {
        width: 100%;
        min-height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
      }

      .name {
        position: relative;
        z-index: 1;
        display: inline-block;
        vertical-align: top;
      }
    }

    .list-d {
      padding: 20rpx;
      overflow: hidden;
      color: #434242;
      font-size: 34rpx;
      font-weight: 400;
      line-height: 70rpx;

      .list {
        width: 100%;
        overflow: hidden;

        .tit {
          margin-top: 10rpx;

          .i {
            width: 24rpx;
            height: 24rpx;
            border-radius: 50%;
            background-color: #30c285;
            display: inline-block;
            vertical-align: top;
            margin: 22rpx 10rpx 0 10rpx;
          }

          .span {
            display: inline-block;
            vertical-align: top;
            line-height: 40rpx;
            padding: 0 14rpx;
            border: solid 1rpx #30c285;
            border-radius: 8rpx;
            margin: 16rpx 0 0 10rpx;
            color: #30c285;
            font-size: 24rpx;
            font-weight: 700;
          }
        }

        .li-d {
          width: 100%;
          padding: 0rpx 20rpx;
          overflow: hidden;
          border-radius: 14rpx;
          margin-top: 10rpx;
          background: linear-gradient(to right, #84a1db40, #6e9eff05);

          .li {
            width: 100%;
            overflow: hidden;
            padding: 0 150rpx 0 40rpx;
            position: relative;
            font-size: 28rpx;
            font-weight: 700;
            line-height: 50rpx;
            margin: 14rpx 0;

            .i {
              width: 12rpx;
              height: 12rpx;
              border-radius: 50%;
              background-color: #30c285;
              position: absolute;
              left: 6rpx;
              top: 20rpx;
            }

            .type {
              font-size: 22rpx;
              font-weight: 400;
              color: #8f8f8f;
              line-height: 30rpx;

              text {
                margin: 14rpx 10rpx 0 0;
                border: solid 1rpx #8f8f8f;
                border-radius: 8rpx;
                padding: 8rpx;
                display: inline-block;
                vertical-align: top;
                word-break: break-all;
              }
            }

            .img {
              width: 38rpx;
              height: 38rpx;
              position: absolute;
              right: 10rpx;
              top: 10rpx;

              image {
                width: 100%;
                height: 100%;
                display: inline-block;
                vertical-align: top;
              }
            }

            .right-d {
              font-size: 22rpx;
              font-weight: 400;
              color: white;
              line-height: 36rpx;
              // border: solid 1rpx #8F8F8F;
              position: absolute;
              right: 10rpx;
              top: 0rpx;
              text-align: right;
              view {
                max-width: 340rpx;
                border-radius: 20rpx;
                padding: 8rpx 15rpx;
                display: inline-block;
                vertical-align: top;
                background: #00cc70;
                margin: 0 0 0 10rpx;
              }
            }

            .img1 {
              width: 14rpx;
              height: 26rpx;
              position: absolute;
              right: 20rpx;
              top: 10rpx;
              transform: rotate(90deg);

              image {
                width: 100%;
                height: 100%;
                display: inline-block;
                vertical-align: top;
              }
            }
          }
        }
      }
    }

    .content-ramk {
      color: #ababab;
      text-align: center;
      font-size: 24rpx;
      line-height: 40rpx;
      margin-top: 20rpx;
    }
  }
  
   .multi-line-text {
      display: -webkit-box; /* 使用WebKit的缩放盒模型显示 */
      -webkit-box-orient: vertical; /* 垂直排列盒子 */
      // -webkit-line-clamp: 3; /* 限制在3行 */
      // overflow: hidden; /* 确保超出容器的文本被隐藏 */
      line-height: 1.5; /* 设置行高 */
      max-height: 60px; /* 最大高度为容器高度 */
      text-overflow: ellipsis; /* 超出部分显示省略号 */
	  text-align: left;
	  margin: 0 20px 10px 20px;
    }

  .quantity-box {
    width: 710rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 20rpx;
    margin: 20rpx auto;
    padding-bottom: 40rpx;

    .title-d {
      width: 100%;
      height: 80rpx;
      position: relative;
      padding: 0 40rpx;
      line-height: 80rpx;
      color: white;
      font-size: 34rpx;
      font-weight: 700;
      overflow: hidden;

      .i {
        display: inline-block;
        vertical-align: top;
        width: 6rpx;
        height: 32rpx;
        background-color: #00b9ff;
        margin: 26rpx 20rpx 0 0;
        position: relative;
        z-index: 1;
      }

      image {
        width: 100%;
        min-height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
      }

      .name {
        position: relative;
        z-index: 1;
        display: inline-block;
        vertical-align: top;

        text {
          font-size: 24rpx;
          line-height: 46rpx;
          font-weight: 400;
          padding: 0 20rpx;
          border-radius: 30rpx;
          background-color: #01d8cb;
          margin: 0 20rpx;
          display: inline-block;
        }
      }

      .right {
        position: absolute;
        right: 30rpx;
        top: 0;
        font-size: 24rpx;
        font-weight: 400;
      }
    }

    .heat_box {
      padding: 20rpx 0 10rpx 0;
      border-bottom: 1rpx solid #cccccc50;

      .heat_head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 40rpx 0 24rpx;

        .heat_head_left {
          display: flex;
          align-items: center;

          .heat_head_left_icon {
            width: 41rpx;
            height: 41rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .heat_head_left_title {
            margin-left: 10rpx;
            font-size: 28rpx;
            font-weight: bold;
            color: #434242;
          }

          .heat_head_left_count {
            margin-left: 18rpx;
            font-size: 24rpx;
            color: #737373;
          }
        }

        .heat_head_right {
          display: flex;
          align-items: center;

          .heat_head_right_spot {
            width: 24rpx;
            height: 24rpx;
            background: #fdc817;
            border-radius: 50%;
          }

          .heat_head_right_text {
            margin-left: 10rpx;
            font-size: 24rpx;
            color: #303030;
            font-weight: bold;
          }

          .img1 {
            width: 14rpx;
            height: 26rpx;
            transform: rotate(90deg);
            margin: 0 10rpx 0 20rpx;

            image {
              width: 100%;
              height: 100%;
              display: inline-block;
              vertical-align: top;
            }
          }
        }
      }

      .heat_info {
        width: 700rpx;

        margin-top: 20rpx;
        padding-bottom: 12rpx;

        .heat_info_list_box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 50rpx;

          .heat_info_list {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;

            .heat_info_icon {
              // position: relative;
              // width: 20rpx;
              // height: 20rpx;
              .dian {
                position: absolute;
                width: 20rpx;
                height: 20rpx;
                border: solid 2px #000000;
                top: -4rpx;
                z-index: 9;
                border-radius: 50%;
                background: white;
              }
            }

            .heat_info_line {
              margin-top: 5rpx;
              width: 144rpx;
              height: 6rpx;
              background: linear-gradient(to right, #0e7849, rgb(31, 222, 60));
              // border-radius: 6rpx;
            }
          }
        }

        .heat_info_num_box {
          margin-top: 10rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 50rpx 0 50rpx;
          position: relative;

          .heat_info_num {
            font-size: 22rpx;
            color: #737373;
            overflow: hidden;
          }
        }
      }

      .tisp_text {
        padding: 30rpx 26rpx 0 0;
        opacity: 0.68;
        font-size: 24rpx;
        text-align: right;
        color: #a0a0a0;
      }
    }

    .content-ramk {
      color: #ababab;
      text-align: center;
      font-size: 24rpx;
      line-height: 40rpx;
      margin-top: 30rpx;
    }
  }

  .pro-box {
    width: 710rpx;
    box-sizing: border-box;
    background-color: #ffffff90;
    border-radius: 20rpx;
    margin: 30rpx auto;
    padding-bottom: 20rpx;

    .title-d {
      width: 100%;
      height: 80rpx;
      position: relative;
      padding: 0 40rpx;
      line-height: 80rpx;
      color: white;
      font-size: 34rpx;
      font-weight: 700;
      overflow: hidden;

      .i {
        display: inline-block;
        vertical-align: top;
        width: 6rpx;
        height: 32rpx;
        background-color: #00b9ff;
        margin: 26rpx 20rpx 0 0;
        position: relative;
        z-index: 1;
      }

      image {
        width: 100%;
        min-height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
      }

      .name {
        position: relative;
        z-index: 1;
        display: inline-block;
        vertical-align: top;

        text {
          font-size: 24rpx;
          line-height: 46rpx;
          font-weight: 400;
          padding: 0 20rpx;
          border-radius: 30rpx;
          background-color: #01d8cb;
          margin: 0 20rpx;
          display: inline-block;
        }
      }

      .right {
        position: absolute;
        right: 30rpx;
        top: 0;
        font-size: 24rpx;
        font-weight: 400;
      }
    }

    .list-d {
      width: 96%;
      text-align: left;
      font-size: 28rpx;
      font-weight: 400;
      line-height: 50rpx;
      overflow: auto;
      color: #434242;
      margin-left: 2%;
      margin-top: 20rpx;

      .img1 {
        width: 46rpx;
        height: 18rpx;
        margin: 20rpx auto;

        image {
          width: 100%;
          height: 100%;
          display: inline-block;
          vertical-align: top;
        }
      }

      .list {
        width: 30%;
        display: inline-block;
        vertical-align: top;
        margin: 1.5% 1.5% 0 1.5%;
        overflow: hidden;
        margin-top: 10rpx;
        text-align: center;

        .img {
          width: 190rpx;
          height: 190rpx;
          margin: 0 auto;
          border-radius: 20rpx;
          background-color: white;
          overflow: hidden;
          margin-bottom: 10rpx;

          image {
            width: 100%;
            height: 100%;
            display: inline-block;
            vertical-align: top;
          }
        }

        .type {
          color: #22c58a;
        }
      }

      .none {
        width: 312rpx;
        height: 260rpx;
        margin: 50rpx auto;

        image {
          width: 100%;
          height: 100%;
          display: inline-block;
          vertical-align: top;
        }
      }
    }
  }

  .status-ddd {
    text-align: center;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 60rpx;
    color: white;

    width: 100%;
    opacity: 0.9;
    padding: 10rpx 10rpx 30rpx 10rpx;
    box-sizing: border-box;
  }

  .additive-none {
    width: 710rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 20rpx;
    margin: 30rpx auto;
    padding: 20rpx 0 20rpx 0;
    text-align: center;
    color: #999999;
    // line-height: 100rpx;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    image {
      width: 588rpx;
      height: 600rpx;
      // display: inline-block;
      // vertical-align: top;
    }
  }
}

.back_a {
  background: #0e7849 !important;
}

.back_b {
  background: #1edf38 !important;
}

.back_c {
  background: #fdc817 !important;
}

.back_d {
  background: #ee3a3a !important;
}

.expand_box {
  position: fixed;
  z-index: 99;
  right: 48rpx;
  width: 232rpx;
  height: 301rpx;
  overflow: hidden;
  box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.16);

  .expand_info {
    width: 232rpx;
    height: 301rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #ffffff;

    .expand_text {
      text-align: left;
      font-size: 28rpx;
      color: #434242;
      width: 100%;
      dispaly: flex;
      justify-content: center;
      align-items: center;
      image {
      }
    }

    .expand_line {
      margin: 30rpx 0;
      width: 178rpx;
      height: 2rpx;
      background: #f5f5f5;
    }
  }
}

.share_box {
  z-index: 9999;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36rpx 0 40rpx;
  width: 750rpx;
  height: 137rpx;
  background: rgba(0, 0, 0, 0.72);

  .share_left {
    .share_left_title {
      font-size: 34rpx;
      font-weight: bold;
      color: #ffffff;
    }

    .share_left_text {
      margin-top: 5rpx;
      font-size: 24rpx;
      color: #a7a7a7;
    }
  }

  .share_right {
    display: flex;
    align-items: center;

    .share_right_btn {
      width: 180rpx;
      height: 85rpx;
      background: #00cf6c;
      border-radius: 43rpx;
      box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 185, 255, 0.2);
      font-size: 30rpx;
      font-weight: bold;
      line-height: 85rpx;
      text-align: center;
      color: #ffffff;
    }
  }
}

.partake_box {
  width: 750rpx;
  height: 400rpx;
  background: #ffffff;
  padding-top: 63rpx;

  .partake_title {
    font-size: 34rpx;
    font-weight: bold;
    text-align: center;
    color: #434242;
  }

  .partake_btn_box {
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 160rpx;

    .partake_btn {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;

      .partake_btn_icon {
        width: 94rpx;
        height: 94rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .partake_btn_text {
        margin-top: 24rpx;
        font-size: 28rpx;
        text-align: center;
        color: #5b5b5b;
      }
    }
  }
}

.content {
  width: 100%;
  overflow: hidden;
  padding: 20rpx 0;
  position: relative;

  .content_img {
    margin: 80rpx auto 0;
    width: 160rpx;
    height: 178rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .content_text {
    margin-top: 0rpx;
    font-size: 24rpx;
    text-align: center;
    color: #434242;
  }

  .copy-right {
    position: absolute;
    left: 10rpx;
    top: 4rpx;
    text-align: right;
    color: #303030;
    font-size: 24rpx;
    line-height: 40rpx;

    image {
      width: 106rpx;
      height: 84rpx;
      display: inline-block;
      vertical-align: top;
      margin: 0 0 0 0rpx;
    }
  }
  .copy-left {
    position: absolute;
    right: 10rpx;
    top: 0rpx;
    text-align: right;
    color: #303030;
    font-size: 24rpx;
    line-height: 40rpx;

    image {
      width: 106rpx;
      height: 84rpx;
      display: inline-block;
      vertical-align: top;
      margin: 0 0 0 10rpx;
    }
  }

  .content_btn {
    margin: 30rpx auto 0;
    width: 586rpx;
    height: 100rpx;
    background: #2767e6;
    border-radius: 50rpx;
    font-size: 32rpx;
    line-height: 100rpx;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
  }
}

.status-img {
  width: 170rpx;
  height: 50rpx;
  position: fixed;
  z-index: 99;
  right: 0;
  top: 0;

  image {
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
  }
}

.alter-box {
  width: 750rpx;
  height: 750rpx;
  position: relative;

  .bg {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .btn {
    width: 554rpx;
    height: 109rpx;
    position: absolute;
    z-index: 2;
    left: calc(50% - 277rpx);
    bottom: 140rpx;
  }

  .value {
    font-size: 80rpx;
    text-align: center;
    position: absolute;
    left: 0;
    width: 100%;
    color: #ff5543;
    font-weight: 700;
    top: 350rpx;
    z-index: 2;
  }
}

.content-dd {
  padding: 40rpx 0 10rpx 0;
  text-align: center;
  color: #434242;
  font-size: 28rpx;
  line-height: 60rpx;
  overflow: hidden;

  .img {
    width: 208rpx;
    height: 208rpx;
    margin: 0 auto 20rpx auto;
    overflow: hidden;

    image {
      width: 100%;
      min-height: 208rpx;
    }
  }

  .title-dd {
    font-weight: 700;
    margin-top: 20rpx;
  }
}

.alter-box-one {
  border-radius: 10rpx;
  background-color: white;
  padding: 0 30rpx 30rpx 30rpx;
  text-align: center;
  line-height: 60rpx;
  font-size: 32rpx;
  color: #303030;
  width: 700rpx;

  .title {
    font-weight: 700;
    line-height: 100rpx;
  }

  .img {
    width: 100%;
    height: auto;

    image {
      width: 100%;
      height: 100%;
      display: inline-block;
      vertical-align: top;
    }
  }

  .content {
    font-size: 28rpx;
    font-weight: 700;
  }
}

.alter-top-box.none {
  top: -300rpx;
}

.alter-top-box {
  width: 100%;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  transition: all 2s;
  background-color: white;
  box-sizing: border-box;
  padding: 30rpx;
  line-height: 100rpx;
  font-size: 32rpx;
  color: #000000;

  .img {
    width: 100rpx;
    height: 100rpx;
    display: inline-block;
    vertical-align: top;

    image {
      width: 100%;
      height: 100%;
      display: inline-block;
      vertical-align: top;
    }
  }

  .text-d {
    width: calc(100% - 120rpx);
    display: inline-block;
    vertical-align: top;
    margin-left: 10rpx;
    padding: 0 20rpx;

    text {
      color: #ee3a3a;
      font-size: 32rpx;
      font-weight: 700;
      margin: 0 10rpx;
    }
  }
}

.navBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  box-sizing: border-box;
  font-size: 32rpx;
  font-weight: bold;
  .navBar_content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 30rpx;
    padding-left: 30rpx;
    box-sizing: border-box;
    .navBar_left {
      width: 40rpx;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .img {
        width: 100%;
        height: 100%;
      }
    }

    .navBar_right {
      font-size: 42rpx;
      font-weight: 700;
      margin-top: -20rpx;
    }
  }
}
</style>